{% extends "base.html" %}
{%load lotto_tags%}
{%block title%}Mapa graficzna losowań{%endblock%}

{%block head%}
    <script type="text/javascript" src="{{MEDIA_URL}}/js/jquery-ui-1.7.1.custom.min.js"></script>
	<script type="text/javascript" src="{{MEDIA_URL}}/js/selectToUISlider.jQuery.js"></script>
	<link rel="stylesheet" href="{{MEDIA_URL}}/css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />
	<link rel="stylesheet" href="{{MEDIA_URL}}/css/ui.slider.extras.css" type="text/css" />
	<script type="text/javascript">
		$(function(){
			$('select#id_month').selectToUISlider({
			    labelSrc:'text',
			    tooltip:false,
			    labels:13
			});
			$('select#id_year').selectToUISlider({
			    labels:12
			});
		});
	</script>
    <style>
    .hide {height:50px;font-size:9px;}
    .hide select, .hide .m-l {display:none;}
	.ui-slider {clear: both; width:660px; margin-bottom:25px;}
    table.values {
        font-size:9px;
    }
    td.n {
        background-color:#6AA2FD;
        color:white;
    }
    td.y {
        background-color:#FF7400;
        color:white;
        font-weight:bold;
    }
    </style>
{%endblock%}

{% block content %}
	<div id="content">
		<div class="post">
			<div class="title">
				<h2>Mapa graficzna losowań</h2>
			</div>
			<div class="entry">
			    <form method="POST" action="{%url map%}">
			    {% csrf_token %}
			        <div class="hide"><span class="m-l">Rok:</span> {{form.year}}</div>
			        <div class="hide"><span class="m-l">Miesiąc:</span> {{form.month}}</div>
			        {{form.mode}} <input type="submit" id="pick" class="m-l" value="Wyświetl" /><br><br>
            	</form>
                <table class="values">
                	<tr>
			        	<th>Data</th>
			        	<th colspan="{{size|length}}">Wyniki</th>
			    	</tr>
	                {%for v in value%}
	                <tr>
	                {%with v.as_list as l%}
	                    <td>{{v.date|date:"d.m"}}</td>
	                    {%for s in size%}
    	                    <td class="{%if l|has:s%}y{%else%}n{%endif%}">{{s}}</td>
    	                {%endfor%}
                    {%endwith%}    	                
	                </tr>
	                {%empty%}
	                <tr>
	                    <td colspan="{{size|length|add:'1'}}">W podanym okresie nie odbyły się losowania.</td>
    	            <tr>
	                {%endfor%}
                </table>
			</div>
		</div>
	</div>
{% endblock %}
